<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view :prop="optionData" :change:prop="echartsFood.updateData" id="echartsFood" class="echarts"></view>
		<!--
		<button @click="changeOption">更新数据</button>
		-->
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		data() {
			/*
			return {
				echartsData:[],
			}
			*/
		},
		props:{
			optionData:{
				type:Object,
				default:()=>{}
			}
		},
		methods: {
			changeDataZoom(){
				this.$emit("updateData")
			},
			calculateColorAtPosition(startColor, endColor, position){
			    // 将颜色值分解为RGB分量  
			    let start = {r: parseInt(startColor.slice(1,3), 16), g: parseInt(startColor.slice(3,5), 16), b: parseInt(startColor.slice(5,7), 16)};  
			    let end = {r: parseInt(endColor.slice(1,3), 16), g: parseInt(endColor.slice(3,5), 16), b: parseInt(endColor.slice(5,7), 16)};  
				//console.log(start,end)
			    // 使用线性插值计算颜色值  
			    let color = {  
			        r: Math.round((end.r - start.r) * position + start.r),  
			        g: Math.round((end.g - start.g) * position + start.g),  
			        b: Math.round((end.b - start.b) * position + start.b)  
			    };  
			  
			    // 将RGB颜色值重新组合为十六进制字符串形式  
			    return `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b.toString(16).padStart(2, '0')}`;  
			    //return color;  
			}
		}
	}
</script>
<script module="echartsFood" lang="renderjs">
	let myChart
	//let currentEndValue = 0
	//let option = 
	export default {
		data(){
			return{
				ownerInstance:null,
				currentEndValue:0,
				option:{
					grid: {
							top: '30rpx',
							bottom: '60rpx',
							left: '25rpx',
							right: '25rpx'
						},
					dataZoom:[{
						type:'inside',
						startValue : 0,
						endValue : 6,
						zoomLock:true,
					}],
					xAxis: {
						type: 'category',
						axisTick: {
							show: false, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
						},
						axisLine:{
							lineStyle:{
								color:'#CCCCCC',
							}
						},
						inverse:true,
						boundaryGap:false,
						//data: [`6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`,`6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`, `6/10\n\r2023`]
					},
					
					yAxis: {
						type: 'value',
						axisLabel:{
							show:false,
						},
						splitLine:{
							lineStyle:{
								type:'dashed'
							}
						}
					},
					series: [
						{
							//data: [2000, 1823, 2109, 1200, 900, 409,2000, 1823, 2109, 1200, 900, 409],
							type: 'line',
							smooth: true,
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(232,97,46,0.7)'
									}, {
										offset: 0.13, color: 'rgba(255,175,103,0.8)'
									}, {
										offset: 1, color: 'rgba(76,243,210,0)'
									}],
									global: false // 缺省为 false
								}
							},
							lineStyle: {
								width:1.2,
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(232, 97, 46, 1)'
									}, {
										offset: 1, color: 'rgba(37, 226, 166, 1)'
									}],
									global: false // 缺省为 false
								}
							},
							label:{
								show:true,
								fontSize:10
							}
						}
					],
				}
			}
		},
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/js/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echartsFood'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option);
				
				myChart.on('dataZoom',(res)=>{
					let currentOption = myChart.getOption();
					let startValue = currentOption.dataZoom[0].startValue;
					let endValue = currentOption.dataZoom[0].endValue;
					if(endValue>this.currentEndValue){
						this.ownerInstance.callMethod('changeDataZoom')
					}
					this.currentEndValue = endValue;
					//计算当前颜色
					let seriesData = currentOption.series[0].data;
					let firstSixElements = seriesData.slice(startValue, endValue+1);
					let maxFoodHeat = firstSixElements.reduce((max, obj) => (obj.value > max.value ? obj : max));  
					let minFoodHeat = firstSixElements.reduce((min, obj) => (obj.value < min.value ? obj : min));
					
					seriesData.forEach((item,index)=>{
						if(index>=startValue&&index<=endValue){
							let position = (item.value-minFoodHeat.value) / (maxFoodHeat.value-minFoodHeat.value);
							let colour = this.calculateColorAtPosition("#25E2A6","#E8612E",position);
							item.label.color = colour;
							item.itemStyle.color = colour;
						}
					});
					myChart.setOption(currentOption);
				});
				
				//console.log(option)
			},
			updateData(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				this.ownerInstance = ownerInstance;
				
				if(myChart!=null){
					let firstSixElements = newValue.foodHeatList.slice(0, 7);  
					let maxFoodHeat = Math.max(...firstSixElements);
					let minFoodHeat = Math.min(...firstSixElements);
					
					let foodHeatList = [];
					newValue.foodHeatList.forEach((item,index) => {
						
						let position = (item-minFoodHeat) / (maxFoodHeat-minFoodHeat);
						if(index>=7)position = 0;
						let colour = this.calculateColorAtPosition("#25E2A6","#E8612E",position)
						//console.log(colour)
						
						let value = item
						if(value<0)value = 0
						
						foodHeatList.push({
							value:value,
							label:{
								color:colour,
								formatter:item+"千卡"
							},
							itemStyle:{
								color:colour
							}
						});
					});
					let recordDateList = [];
					newValue.recordDateList.forEach((item) => {
						recordDateList.push({
							value:item,
						});
					});
					this.option.series[0].data = foodHeatList;
					this.option.xAxis.data = recordDateList;
					myChart.setOption(this.option)
				}
			},
			calculateColorAtPosition(startColor, endColor, position){
			    // 将颜色值分解为RGB分量  
			    let start = {r: parseInt(startColor.slice(1,3), 16), g: parseInt(startColor.slice(3,5), 16), b: parseInt(startColor.slice(5,7), 16)};  
			    let end = {r: parseInt(endColor.slice(1,3), 16), g: parseInt(endColor.slice(3,5), 16), b: parseInt(endColor.slice(5,7), 16)};  
				//console.log(start,end)
			    // 使用线性插值计算颜色值  
			    let color = {  
			        r: Math.round((end.r - start.r) * position + start.r),  
			        g: Math.round((end.g - start.g) * position + start.g),  
			        b: Math.round((end.b - start.b) * position + start.b)  
			    };  
			  
			    // 将RGB颜色值重新组合为十六进制字符串形式  
			    return `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b.toString(16).padStart(2, '0')}`;  
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 400rpx;
	}
</style>
